<template>
  <el-dialog class="video-dialog" :visible="visible" :title="title" width="50%" append-to-body @close="closeVideoModal">
    <video
      ref="video"
      class="play-video"
      controls="controls"
      autoplay="autoplay"
    >
      <source :src="src" type="video/mp4" />
    </video>
  </el-dialog>
</template>

<script>
export default {
  name: "VideoModal",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 父组件传参弹窗标题
    title: {
      type: String,
      default: ""
    },
    // 父组件传参要播放的视频名称
    videoUrl: {
      type: String,
      default: ""
    }
  },
  computed: {
    src() {
      return this.videoUrl;
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 播放完毕自动关闭弹窗
      const eleVideo = document.querySelector(".play-video");
      eleVideo.addEventListener("ended", () => {
        this.closeVideoModal();
      }, false);
    });
  },
  methods: {
    closeVideoModal() {
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style scoped>
.play-video {
  object-fit: contain;
  width: 100%;
  height: 99.5%;
}
</style>
